<template>
  <div>
    <van-nav-bar title="更改信息" left-text="返回" left-arrow  @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size='25'/>
      </template>
    </van-nav-bar>
    <div class="headPortrait">
      <div class="titleText">头像</div>
      <div class="myImg">
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607410015402&di=d4d7232b04f37e816a3e6193a8352141&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F01%2F20171001004645_WSZye.thumb.700_0.jpeg"
          alt=""
        />
      </div>
    </div>
    <van-cell title="昵称" is-link :value=uname />
    <van-cell title="电话" is-link value="12345678" />
    <van-cell title="电子邮箱" is-link :value=uname+com />
    <van-cell title="性别" is-link value="未设置" />
    <van-cell title="生日" is-link value="未设置" />
  </div>
</template>

<script>
export default {
  name: "ChangeInfo",
  data(){
    return{
       uname: localStorage.user,
       com:'@163.com'
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back(); //返回按钮
    },
    
  },
  mounted(){
   
  }
};
</script>

<style scoped lang='less'>
.headPortrait {
  height: 1.6rem;
  font-size: 14px;
  border-bottom: 1px solid #FAFBFB;
  background: #fff;
  padding: 10px 16px;
  .titleText {
    float: left;
    line-height: 1.6rem;
  }
  .myImg {
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;
    border-radius: 50%;
    float: right;
    margin-left: 0.6rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>